<template>
  <view class="timetable">
    <view class="header">
      <view class="header-item" v-for="item in week" :key="item">{{ item }}</view>
    </view>

    <view class="main">
      <view class="row" v-for="(item, index) in timetableType" :key="index">
        <view class="time-item">
          <view class="index">{{ item.index }}</view>
        </view>
      </view>

      <view class="course-container">
        <view class="week" v-for="(week, weekIndex) in courseData" :key="weekIndex">
          <view class="courseList" v-for="(course, courseIndex) in week" :key="courseIndex" @click="showDetail(course)" >
            <view @click="handleCourseClick(course, weekIndex, courseIndex)" class="course"
              :style="{ height: (course.length * 80 - 20) + 'rpx', background: course.backgroundColor }"
              v-if="course.length > 0">{{ course.name }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'Timetable',
  props: {
    timetableType: {
      type: Array,
      default: () => {
        return [
          { index: '0.5' },
          { index: '1' },
          { index: '1.5' },
          { index: '2' },
          { index: '2.5' },
          { index: '3' },
          { index: '3.5' },
          { index: '4' },
          { index: '4.5' },
          { index: '5' },
          { index: '5.5' },
          { index: '6' }
        ]
      }
    },
    week: {
      type: Array,
      default: () => {
        return ['0:00', '6:00', '12:00', '18:00']
      }
    },
    timetables: {
      type: Array,
      default: () => {
        return []
      }
    },
    palette: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      allPalette: [...this.palette, '#f05261', '#48a8e4', '#ffd061', '#52db9a', '#70d3e6', '#52db9a', '#3f51b5', '#f3d147', '#4adbc3', '#673ab7', '#f3db49', '#76bfcd', '#b495e1', '#ff9800', '#8bc34a'],

    }
  },
  computed: {
    courseData() {
      // 为数据标记背景颜色的函数
      let paletteIndex = 0
      const getBackgroundColor = () => {
        const backgroundColor = this.allPalette[paletteIndex]
        paletteIndex++
        if (paletteIndex >= this.allPalette.length) {
          paletteIndex = 0
        }
        return backgroundColor
      }

      // 合并
      const listMerge = []
      this.timetables.forEach(function (list, i) {
        if (!listMerge[i]) {
          listMerge[i] = []
        }
        list.forEach(function (item, index) {
          if(!item) return listMerge[i].push({ name: '', length: 1, backgroundColor: '' })
          if (!index) {
            return listMerge[i].push({ name: item.eventTitle, length: 1, backgroundColor: item.eventColor? item.eventColor: getBackgroundColor(),...item })
          }
          if (item && item.eventTitle === (listMerge[i][index - 1] || {}).name ) {
            const sameIndex = (listMerge[i][index - 1] || {}).sameIndex
            if (sameIndex || sameIndex === 0) {
              listMerge[i][sameIndex].length++
              return listMerge[i].push({ name: item.eventTitle, length: 0, sameIndex: sameIndex,...item  })
            }
            listMerge[i][index - 1].length++
            return listMerge[i].push({ name: item.eventTitle, length: 0, sameIndex: index - 1,...item  })
          } else {
            return listMerge[i].push({ name: item.eventTitle, length: 1, backgroundColor: item.eventColor? item.eventColor: getBackgroundColor(),...item  })
          }
        })
      })
      return listMerge
    },
  },
  methods: {
    showDetail(item) {
      if(!item.eventId) return
      let newItem = JSON.parse(JSON.stringify(item))
			for (let key in newItem) {
				if (newItem[key] == null) {
					newItem[key] = '';
				}
			}
      if(newItem.eventType){
        for(let key in newItem.eventType){
          if(newItem.eventType[key] == null){
            newItem.eventType[key] = ''
          }
        }
      }
      uni.setStorageSync('event', newItem)
      uni.navigateTo({
				url: '/pages/event/detail/index'
			})
    },
    handleCourseClick(course, weekIndex, courseIndex) {
      const data = {
        index: courseIndex + 1,
        length: course.length,
        week: this.week[weekIndex],
        weekIndex: weekIndex,
        name: course.name,
        course
      }
      this.$emit('courseClick', data)
    }
  }
}
</script>

<style scoped lang="scss">
.timetable {
  background: white;
  border: 2rpx solid #E4E7ED;
  border-radius: 8rpx;

  .header {
    padding-left: 80rpx;
    height: 56rpx;
    display: flex;
    align-items: center;
    background: #F5F7FA;

    .header-item {
      flex: 1;
      text-align: center;
    }
  }

  .main {
    position: relative;

    .row {
      height: 80rpx;
      position: relative;

      &:after {
        content: '';
        height: 0;
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        border-bottom: 1rpx dashed #E4E7ED;
      }

      .time-item {
        height: 100%;
        width: 80rpx;
        text-align: center;
        background: #F5F7FA;

        .index {
          color: #909399;
          padding-bottom: 8rpx;
          padding-top: 16rpx;
        }
      }
    }

    .course-container {
      position: absolute;
      top: 0;
      left: 80rpx;
      width: calc(100% - 80rpx);
      height: 100%;
      display: flex;

      .week {
        flex: 1;
        width: 0;
        flex-grow: 1;
        display: flex;
        flex-direction: column;

        .courseList {
          word-break: break-all;
          color: white;
          height: 80rpx;

          .course {
            padding-top: 20rpx;
            border-radius: 16rpx;
            text-align: center;
            overflow: hidden;
          }
        }
      }
    }
  }
}
</style>
